{{ extend './layout/main.html'}}   
{{block 'title'}}编辑音乐{{/block}} 
{{block 'content'}}
    <div class="container">
        <div class="page-header">
            <h1><a href="/">我的音乐</a><small>--编辑音乐</small><h1>
        </div>
    </div>
    <div class="container">
        <form id="form" method="post" action="">
            <div class="form-group">
                <label for="">歌曲编号</label>
                <input type="text" name="id" class="form-control" readonly v-model ="myMusic.mid">
            </div>
            <div class="form-group">
                <label for="">歌曲标题</label>
                <input type="text" name="title" class="form-control" placeholder="请输入歌曲标题" v-model="myMusic.title">
            </div>
            <div class="form-group">
                <label for="">歌曲时长</label>
                <input type="text" name="time" class="form-control" placeholder="请输入歌曲时长" v-model="myMusic.time">
            </div>
            <div class="form-group">
                <label for="">歌手</label>
                <input type="text" name="singer" class="form-control" placeholder="请输入歌手姓名" v-model="myMusic.singer">
            </div>
            <div class="form-group">
                <label for="">歌曲文件</label>
                <input type="file" name="file" id="file" ref="file">
                <p class="help-block"><span style="cursor:pointer" class="glyphicon glyphicon-play-circle ply" v-on:click.stop.prevent="play"></span></p>
            </div>
            <div class="form-group">
                <label for="">歌词文件</label>
                <input type="file" name="filelrc" id="filelrc" ref="filelrc">
            </div>
            <button type="button" class="btn btn-success" @click="editBtn">完成编辑</button>
            <audio controls id="music1" :src= "myMusic.file">
                 您的浏览器不支持 audio 元素。
            </audio>

        </form>
    </div>
{{/block}}
{{block 'vue'}}
<script>
    new Vue({
        el:"#app",
        data:{
            myMusic:{}
        },
        methods: {
            getMusic(mid){
                console.log(mid);
                let _this = this;
                axios.get('/music/getMusic/'+mid, {
                    params: {
                    }
                })
                .then(function (response) {
                    let{msg,data,error} = response.data;
                    if(!error){
                        _this.myMusic = data;
                    }else{
                        window.alert(msg);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
            },
            editBtn(){
                let fileLen = (document.getElementById("file").files.length);
                let filelrcLen = (document.getElementById("filelrc").files.length);
                let _this = this;
                var FormData1 = new FormData();
                FormData1.append("mid",this.myMusic.mid);
                FormData1.append("title",this.myMusic.title);
                FormData1.append("singer",this.myMusic.singer);
                FormData1.append("time",this.myMusic.time);

                this.$refs.filelrc.files["0"]
                let file = null;
                let filelrc = null;
                if(!fileLen){
                    file = this.myMusic.file;
                }else{
                    file = this.$refs.file.files["0"]
                }
                if(!filelrcLen){
                    filelrc = this.myMusic.filelrc;
                }else{
                    filelrc = this.$refs.filelrc.files["0"]
                }
                FormData1.append("file",file);
                FormData1.append("filelrc",filelrc);
                axios({
                    method: 'put',
                    url: '/api/updataMusics',
                    data:FormData1,

                }).then(function (response) {
                    let {errno,msg} = (response.data);
                    if(!errno){
                       
                        // this.$refs.file.value="";
                        window.alert("修改成功");
                       
                    }else{
                        window.alert("添加失败")
                    }
                });


            },
            play(){
                this.$nextTick(() => {
                    var audio = document.getElementById('music1');
                    if(audio!==null){             
                        //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
                        if(audio.paused) { 
                            audio.play();//audio.play();// 这个就是播放  
                        }else{
                            audio.pause();// 这个就是暂停
                        }
                    } 
                });
            },
        },
        computed: {
            
        },
        created() {
            let mid = getUrlParms("mid");
            // if((!mid)){
            //     window.location.href = "/";
            //     return;
            // }
            this.getMusic(mid);
        },
        mounted() {
            
        },
    })
</script>
{{/block}}
